<!--
 * @Description: 运输地图
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:53:39
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px;">订单号</span>
                  <el-input v-model="tableParam.orderNo" style="width: 220px;" placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">车牌号</span>
                  <el-input v-model="tableParam.carNo" style="width: 220px;" placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">状态</span>
                  <el-select v-model="tableParam.dataStatus" style="width: 220px;" placeholder="请选择">
                    <el-option label="生产中" :value="1"></el-option>
                    <el-option label="运输中" :value="2"></el-option>
                    <el-option label="浇筑中" :value="3"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="gettableDataMap(false)">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="gettableDataMap(true)">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <div style="height:calc(100vh - 335px);padding:20px;">
          <el-amap ref="amapManager" vid="amapDemo" :center="mapCenter" :zoom="zoom" class="amap-demo">
            <el-amap-marker v-for="(item, index) in markers" :key="index+100" :position="item.position" :vid="item.vid" :icon="item.icon"></el-amap-marker>
            <!-- <el-amap-info-window :position="currentWindow.position" :content="currentWindow.content" :autoMove="true" :events="currentWindow.events" :offset="currentWindow.offset" :showShadow="true" :visible="currentWindow.visible">
            </el-amap-info-window> -->
            <el-amap-circle v-for="(circle,index) in circles" :key="index" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :bubble="true"></el-amap-circle>
          </el-amap>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  get_car_location,
  QueryPageElectronicFence
} from "@/api/smart/schedul/j.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  mixins: [mixin],
  data() {
    return {
      UserInfo: '',
      principalName: '',
      currentWindow: {
        position: [104.045543, 30.53947],
        content: "",
        offset: [0, -20],
        visible: false,
        events: {},
      },
      searchOption: {
        city: "全国",
        citylimit: true,
      },
      markers: [],
      plugin: [],
      zoom: 14,
      mapCenter: [104.045543, 30.53947],
      /*表格数据*/
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      circles: [],//电子围栏
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
    this.gettableDataMap()
  },
  methods: {
    gettableDataMap() {
      // let _this = this;
      this.markers = [];
      let json1 = {
        isAssess: "5",
        page: 1,
        pageSize: 999,
      }
      QueryPageElectronicFence(json1).then((res) => {
        if (res.code == 1001) {
          this.circles = []
          res.data.data.forEach((e) => {
            if (e.longitude) {
              this.circles.push({
                center: [e.longitude, e.latitude],
                radius: e.distance,
                fillOpacity: 0.2,
              })
            }
          })
        }
      })
      let obj = {
        orderNo: this.tableParam.orderNo,
        carNo: this.tableParam.carNo,
        dataStatus: this.tableParam.dataStatus
      }
      get_car_location(obj).then((res) => {
        if (res.code == 1001) {
          res.data.forEach((v, k) => {
            v.vid = k;
          });
          res.data.forEach((v) => {
            let data = {
              vid: v.vid,
              position: [v.longitude || 104.045543, v.latitude || 30.53947],
              icon: require('@/assets/guanChe.png'),
              // icon: '/assets/guanChe.png',
              // Window: {//信息窗体
              //   position: [v.longitude || 104.045543, v.latitude || 30.53947],
              //   content: v.carNo,
              //   offset: [0, -35],
              //   visible: false,
              //   events: {
              //     close() {//信息窗体关闭
              //       _this.currentWindow = _this.$options.data().currentWindow;
              //     },
              //   },
              // },
              // events: {
              //   click: (e) => {//信息窗体打开
              //     _this.currentWindow = _this.markers[e.target.w.vid].Window;
              //   },
              // },
            };
            this.markers.push(data);
          });
          // setTimeout(() => {
          //   this.$nextTick(() => {
          //     this.$refs.amapManager.$$getInstance().setFitView()//可视区域适应当前所有地图点
          //   });
          // }, 1000)
        }
      });
    },
  },
};
</script>
